<template>
  <transition :name="transition"
              :mode="mode">
    <slot></slot>
  </transition>
  <div class="overlay-top"></div>
  <div class="overlay-right"></div>
  <div class="overlay-bottom"></div>
  <div class="overlay-left"></div>
</template>
<script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'

  export default defineComponent({
    name: 'os-page-transition',
    props: {
      name: {
        type: String,
        defalut: '',
      },
    },
    setup(props) {
      const router = useRouter()
      console.log(router)
      const transition = ref<any>('fade')
      const mode = ref<any>('out-in')
      onMounted(() => {
        router.beforeEach((to, from, next) => {
          console.log(to.meta.transition, props.name)
          transition.value = to.meta.transition ? to.meta.transition : props.name
          next()
        })
      })
      return {
        transition,
        mode,
      }
    },
  })
</script>
<style lang="scss" scoped>
  // fade
  @import '@/assets/styles/transitions/fade/fade';
  @import '@/assets/styles/transitions/fade/fade-in-down';
  @import '@/assets/styles/transitions/fade/fade-in-right';
  @import '@/assets/styles/transitions/fade/fade-in-up';
  @import '@/assets/styles/transitions/fade/fade-in-left';

  // zoom
  @import '@/assets/styles/transitions/zoom/zoom';

  // flip
  @import '@/assets/styles/transitions/flip/flip-x';
  @import '@/assets/styles/transitions/flip/flip-y';

  // overlay
  @import '@/assets/styles/transitions/overlay/overlay-right';
  @import '@/assets/styles/transitions/overlay/overlay-down';
  @import '@/assets/styles/transitions/overlay/overlay-up';
  @import '@/assets/styles/transitions/overlay/overlay-left';
  @import '@/assets/styles/transitions/overlay/overlay-up-full';
  @import '@/assets/styles/transitions/overlay/overlay-right-full';
  @import '@/assets/styles/transitions/overlay/overlay-down-full';
  @import '@/assets/styles/transitions/overlay/overlay-left-full';
  @import '@/assets/styles/transitions/overlay/overlay-up-down';
  @import '@/assets/styles/transitions/overlay/overlay-left-right';
</style>